feat: compact header and add GitHub icon #57 #59
Open
ankitrraj wants to merge 1 commit intoStabilityNexus:mainfrom
Open
feat: compact header and add GitHub icon #57 #59ankitrraj wants to merge 1 commit intoStabilityNexus:mainfrom
ankitrraj wants to merge 1 commit intoStabilityNexus:mainfrom
Conversation
Contributor
WalkthroughThe pull request modifies the header layout in Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
app/page.tsx(2 hunks)
🔇 Additional comments (1)
app/page.tsx (1)
105-111: Compact header sizing looks consistent; just sanity-check mobile wrapping.With
text-2xl+ the right-side actions, verify the header doesn’t wrap awkwardly on small widths (e.g., iPhone SE / 320px) and that the sticky header height stays usable.
Comment on lines
+105
to
+126
| <div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center"> | ||
| <div> | ||
| <h1 className="text-5xl font-bold font-playfair bg-gradient-to-r from-[#228B22] via-[#5A981A] via-[#91A511] via-[#ADAC0D] via-[#E4B905] to-[#FFBF00] bg-clip-text text-transparent drop-shadow-sm leading-tight pb-2"> | ||
| <h1 className="text-2xl font-bold font-playfair bg-gradient-to-r from-[#228B22] via-[#5A981A] via-[#91A511] via-[#ADAC0D] via-[#E4B905] to-[#FFBF00] bg-clip-text text-transparent drop-shadow-sm leading-tight"> | ||
| Stable Viewpoints | ||
| </h1> | ||
| <p className="text-gray-600 mt-2 text-lg">Independent Articles about Stability</p> | ||
| <p className="text-gray-600 text-sm">Independent Articles about Stability</p> | ||
| </div> | ||
| <div className="flex items-center gap-6"> | ||
| <a | ||
| href="https://github.com/StabilityNexus/StableViewpoints" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="bg-black text-white p-2 rounded-full hover:bg-gray-800 transition-colors" | ||
| > | ||
| <Github className="w-5 h-5" /> | ||
| </a> | ||
| <Link | ||
| href="/submit" | ||
| className="inline-flex items-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-4 py-2 text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" | ||
| > | ||
| Submit an Article | ||
| </Link> |
Contributor
There was a problem hiding this comment.
Add accessible name + focus styles for the icon-only GitHub link.
Right now the <a> contains only an SVG, so screen readers may announce it as an unlabeled “link”, and keyboard users don’t get a clear focus indicator.
<div className="flex items-center gap-6">
<a
href="https://github.com/StabilityNexus/StableViewpoints"
target="_blank"
rel="noopener noreferrer"
- className="bg-black text-white p-2 rounded-full hover:bg-gray-800 transition-colors"
+ aria-label="Stable Viewpoints on GitHub"
+ title="Stable Viewpoints on GitHub"
+ className="bg-black text-white p-2 rounded-full hover:bg-gray-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black"
>
<Github className="w-5 h-5" />
</a>
<Link
href="/submit"
- className="inline-flex items-center gap-2 bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-4 py-2 text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"
+ className="inline-flex items-center gap-2 rounded-md bg-gradient-to-r from-[#228B22] to-[#91A511] hover:from-[#3E921E] hover:to-[#ADAC0D] text-white px-4 py-2 text-sm font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#228B22]"
>
Submit an Article
</Link>
</div>🤖 Prompt for AI Agents
In app/page.tsx around lines 105 to 126, the GitHub anchor is icon-only and
lacks an accessible name and keyboard focus styles; add an accessible label by
either adding aria-label="Open StableViewpoints GitHub" to the <a> or inserting
a visually hidden span (className="sr-only") with that text, and enhance
keyboard focus visibility by adding focus-visible classes to the anchor's
className (for example: focus:outline-none focus-visible:ring-2
focus-visible:ring-offset-2 focus-visible:ring-black or equivalent Tailwind
focus classes) so screen readers announce the link and keyboard users see a
clear focus indicator.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stable.Viewpoints.-.Google.Chrome.2025-12-14.01-35-16.mp4
there is proof of and before is like
so its a better choice
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.